<template>
    <div v-if="showData.magicSquare">
        <div class="magic-square-view"
            :style="{ height: showData.heightNum < 2 ? `${magicSquareViewBoxWidth / 2}px` : `${magicSquareViewBoxWidth}px` }">
            <div v-for="(item, index) in showData.magicSquare" :key="index" class="magic-square-view-content"
                :style="`width:${(magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum * item.widthNum}px;height:${(magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum * item.heightNum}px;top:${item.yInx * (magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum}px;left:${item.xInx * (magicSquareViewBoxWidth - showData.styleMargin) / showData.widthNum}px;`">
                <div :style="`padding:${showData.stylePadding}px`" class="magic-square-image-box">
                    <div v-if="item.image != ''" class="image-view-box" :style="{ backgroundImage: `url(${item.image})` }">
                    </div>
                    <div v-else class="image-view-box">
                        图片
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="empty-data">
        <span>编辑魔方组件</span>
    </div>
</template>
  
  
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    props: {
        showData: {
            type: Object as any,
        },
    },
    setup() {
        const magicSquareViewBoxWidth = ref(322);
        const onemagicSquareViewBoxWidth = ref(0);
        return { magicSquareViewBoxWidth, onemagicSquareViewBoxWidth }
    }
})
</script>
  
<style scoped lang="scss">
.magic-square-view {
    position: relative;
    min-height: 26px;
    margin: 0 auto;
}

.magic-square-view-content {
    position: absolute;
    background-color: #fff;
    box-sizing: border-box;
}

.magic-square-image-box {
    position: relative;
    height: 100%;

    .image-view-box {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        font-size: 12px;
        height: 100%;
    }
}

.empty-data {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;

}
</style>

